<template>
    <div class="detail">
        <yw-header></yw-header>
        <div class="detail-big">
            <div class="detail-xx">
                <img class="detail-tx" :src="$imgPath(userObj.headImg)" alt="">
                <ul class="detail-box">
                    <li class="clearfix">
                        <span class="name">{{userObj.nickName}}</span>
                        <span class="sex1" v-if="userObj.sex == 1">{{userObj.age}}</span>
                        <span class="sex2" v-if="userObj.sex == 2">{{userObj.age}}</span>
                    </li>
                    <li class="clearfix">
                        <!-- <span class="vip-hg vip">VIP2</span>
                        <span class="vip-zs vip">VIP2</span>
                        <span class="zph">周榜第99+名</span> -->
                        <span class="uid">UID:{{userObj.code}}</span>
                    </li>
                    <li class="clearfix">
                        <span class="biaoqian" v-for="(item,index) in myLabel" :key="index"><em v-if="index<3">{{item.dict.name}}</em></span>
                    </li>
                </ul>
                <div class="song-gift">
                    <Carousel autoplay v-model="value3" loop dots="none" :autoplay-speed="5000" arrow="never" easing="fade">
                        <CarouselItem v-for="(item,index) in giftNumArr" :key="index">
                            <p v-for="(itemEr,indexEr) in item" :key="indexEr">
                                <span>{{itemEr.shu[0]}}</span>
                                <span>送给</span>
                                <span>{{itemEr.shu[1]}}</span>
                                <span>{{itemEr.shu[2]}}{{itemEr.shu[3]}}</span>
                                <span><img class="imgLunboSpan" :src="$imgPath(itemEr.shu[4])" alt="" srcset=""></span>
                            </p>
                        </CarouselItem>
                    </Carousel>
                </div>
                <div class="dzh">
                    <p class="zaxian">
                        <span>在线</span>
                        <img src="../assets/img/detail/zx.png" alt="" srcset="">
                    </p>
                    <p class="gz-fx">
                        <span class="fx" @click="isShare=!isShare,qrcode()" id="share">分享</span>
                        <span class="gz-drop" v-if="isAtten" @click="dropAtt(userObj.userId)">取消关注 | {{detailObj.fansNum>0?detailObj.fansNum:'0'}}</span>
                        <span class="gz" v-if="isAtten == false && meDetail" @click="addAtt()">关注 | {{detailObj.fansNum>0?detailObj.fansNum:'0'}}</span>                                                                      
                    </p>
                    <!-- 分享 --> 
                    <div class="share" v-show="isShare">
                        <p>快速分享</p>
                        <div class="share-img">
                            <canvas ref="canvas" class="canvasShare"></canvas>
                            <img @click="noneShare()" class="share-small" src="../assets/img/share/share-2.png" alt="">
                            <img @click="noneShare()" class="share-small" src="../assets/img/share/share-3.png" alt="">
                            <img @click="noneShare()" class="share-small" src="../assets/img/share/share-4.png" alt="">
                        </div>
                        <div class="share-bot">
                            <input type="text" readonly v-model="fxLink" id="inviteCode">
                            <!-- <p>{{fxLink}}</p> -->
                            <div @click="copy()">复制</div>
                            <div class="myClear"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-content clearfix">
                <div class="detail-left">
                    <div class="detail-lunbo-box">
                        <div class="big-div-img" @click="videoPlay()">
                            <video v-if="bigPic.indexOf('mp4')>0" :src="$imgPath(bigPic)" class="big-video" id="myVideo">
                            </video>
                            <img class="big-img" v-else :src="$imgPath(bigPic)" alt="">
                            <Icon class="bofang" size="30" type="logo-youtube" v-if="videoPlayButton && bigPic.indexOf('mp4')>0" />
                        </div>
                        <div class="swiper-button">
                            <Carousel v-model="value1" dots="none" arrow="always">
                                <CarouselItem  v-for="(item,index) in userPhoto" :key="index">
                                    <div class="demo-carousel" v-for="(itemEr,indexEr) in item" :key="indexEr">
                                        <video class="pic" :class="[userPhotoIndex == indexEr ? 'actvie' : '']" v-if="itemEr.indexOf('mp4')>0" :src="$imgPath(itemEr)" width="100%" @click="bigPic = itemEr,userPhotoIndex = indexEr">
                                        </video>
                                        <img class="pic" v-else :class="[userPhotoIndex == indexEr ? 'actvie' : '']" :src="$imgPath(itemEr)" alt="" @click="bigPic = itemEr,userPhotoIndex = indexEr,videoPlayButton = !videoPlayButton">
                                    </div>
                                </CarouselItem>
                            </Carousel>
                            <img class="zuo" src="../assets/img/detail/zuo.png" alt="">
                            <img class="you" src="../assets/img/detail/you.png" alt="">
                        </div>
                    </div>
                    <div class="detail-gift">
                        <div class="gift-title clearfix">
                            <img class="gift-hezi" src="../assets/img/detail/gift.png" alt="" srcset="">
                            <span class="gift-name">礼物</span>
                            <span class="gift-zs" v-if="Object.keys(moneyObj).length != 0">余额：{{moneyObj.credits}}钻石</span>
                            <img class="gift-hz" v-if="Object.keys(moneyObj).length != 0" src="../assets/img/detail/hz.png" alt="">
                        </div>
                        <div class="gift-nr clearfix">
                            <div class="clearfix">
                                <p v-for="(item,index) in giftList" :key="index" :class="[giftIndex == index ? 'active' : '']" @click="giftIndex = index,giftObj=item,giftNumVaule=1,specialEfficiency = item.specialEfficiency">
                                    <Tooltip :content="'价值：'+item.price+'钻石'" placement="top" style="width:63px;">
                                        <img :src="$imgPath(item.image)" alt="">
                                        <span>{{item.name}}</span>
                                    </Tooltip>
                                </p>
                            </div>
                        </div>
                        <div class="gift-num-box">
                            <span class="gift-num-name">{{giftObj.name}}</span>
                            <span class="bujinqi">
                                <em @click="giftJian()">-</em>
                                <input type="text" value="1" v-model="giftNumVaule">
                                <em @click="giftAdd()">+</em>
                            </span>
                            <span class="gift-zengsong" v-if="meDetail" @click="giving(),credits2rmb()">赠送</span>
                        </div>
                    </div>
                    <div class="detail-ziliao clearfix">
                        <div class="gift-title clearfix">
                            <img class="gift-hezi" src="../assets/img/detail/ziliao.png" alt="" srcset="">
                            <span class="gift-name">资料</span>
                        </div>
                        <ul class="detail-ul">
                            <li><span>星座：</span>{{detailObj.zodiacSigns}}</li>
                            <li><span>生日：</span>{{detailObj.birthday}}</li>
                            <li><span>个性标签：</span><label v-for="(item,index) in myLabel" :key="index"><em v-if="index<3">{{item.dict.name + '、'}}</em></label></li>
                            <li><span>兴趣爱好：</span>{{detailObj.hobby}}</li>
                            <li><span>个性签名：</span>{{detailObj.signature}}</li>
                        </ul>
                    </div>
                </div>
                <div class="detail-right clearfix">
                    <div class="detail-right-top clearfix">
                        <ul class="top1 clearfix" v-if="shzList.length > 0">
                            <li class="shz">
                                <img src="../assets/img/detail/shz.png" alt="">
                                <span>守护者</span>
                            </li>
                            <li class="detail-paiming" v-for="(item,index) in shzList" :key="index">
                                <span  v-if="index<5" class="paiming-tx" :class="{'two':index == 1,'three':index==2,'paiming-tx-outer':index>2}">
                                    <img :class="index < 3 ? 'tx-img' : 'tx-img-outher'" :src="$imgPath(item.headImg)" alt="">
                                    <img v-if="index == 0" class="oneYi" src="../assets/img/detail/1.png" alt="">
                                    <img v-if="index == 1" class="oneYi" src="../assets/img/detail/2.png" alt="">
                                    <img v-if="index == 2" class="oneYi" src="../assets/img/detail/3.png" alt="">
                                </span>
                                <span class="paiming-name" :title="item.nickName">{{item.nickName.length > 4 ? item.nickName.substring(0,4) : item.nickName}}</span>
                                <span class="paiming-gx" :class="{'paiming-gx-two':index == 1,'paiming-gx-three':index==2,'paiming-gx-ouhter':index>2}">贡献值{{item.guardianNum}}</span>
                            </li>
                        </ul>
                        <ul class="top1 clearfix" v-else>
                            <li class="detail-gift-lunbo" style="margin-right:0;">
                                <img src="../assets/img/sh.png" alt="">
                                <span>主播暂无人守护，快开启对ta的守护吧~</span>
                            </li>
                        </ul>
                    </div>
                    <div class="detail-right-xia clearfix">
                        <div class="detail-right-gift" v-if="giftNumList.length > 0">
                            <img src="../assets/img/detail/big-gift.png" alt="">
                            <span>礼物</span>
                        </div>
                        <div class="detail-right-lunbo" v-if="giftNumList.length > 0">
                            <Carousel v-model="value2" dots="none" arrow="always">
                                <CarouselItem v-for="(item,index) in giftNumList" :key="index">
                                    <div class="gift-img-box" v-for="(itemEr,indexEr) in item" :key="indexEr">
                                        <img :src="$imgPath(itemEr.image)" alt="">
                                        <span>{{itemEr.count}}</span>
                                    </div>
                                </CarouselItem>
                            </Carousel>
                        </div>
                        <div class="detail-gift-lunbo" v-if="giftNumList.length == 0">
                            <img src="../assets/img/gift.png" alt="">
                            <span>喜欢我就给我送礼物吧~</span>
                        </div>
                    </div>
                    <div class="detail-service-tab clearfix">
                        <serviceTab :userObj="userObj" :meDetail="meDetail" :userId="userId" @detailService="detailService"></serviceTab>
                    </div>
                </div>
            </div>
        </div>
        <Modal v-model="isGiving" title="打赏支付" width="560px;" :footer-hide="true" :scrollable="true">
            <div class="suoxu">
                <span>所需钻石</span>
                <span>{{giftObj.price * giftNumVaule}} <img src="../assets/img/detail/hz.png" alt=""></span>
            </div>
            <div class="suoxu">
                <span>钻石余额</span>
                <span>-{{diamond}} <img src="../assets/img/detail/hz.png" alt=""></span>
            </div>
            <div class="zhifuType" v-if="moneyObj.credits  < giftObj.price * giftNumVaule">
                <span>支付方式：</span>
                <a class="gift-zfb" :class="[zhifuType == 0 ? 'active' : '']" @click="zhifuType = 0">
                    <img src="../assets/img/pay/Pay-zfb.png">
                </a>
                <a class="gift-zfb gift-wx" :class="[zhifuType == 1 ? 'active' : '']" @click="zhifuType = 1">
                    <img src="../assets/img/pay/Pay-wx.png">
                </a>
            </div>
            <div class="suoxu dikou" v-if="giftObj.price * giftNumVaule > moneyObj.credits">
                <span class="suoxu-span">余额抵扣：-￥{{giftZfObj.finalMoney}}({{giftZfObj.money}}<img src="../assets/img/detail/hz.png" alt="">) </span>
            </div>
            <div class="suoxu dikou" v-if="moneyObj.credits  < giftObj.price * giftNumVaule">
                还需支付：{{giftZfObj.needPay}}元
            </div>
            <div class="gift-button">
                <span @click="isGiving = false">取消</span>
                <span @click="giftPay()">支付</span>
            </div>
        </Modal>
        <Modal
            v-model="ewmBox"
            :closable="false" :footer-hide="true" width="210" class-name="vertical-center-modal">
            <canvas ref="canvas1"></canvas>
        </Modal>
        <yw-footer></yw-footer>
        <Modal v-model="giftTx" class="giftBj" :footer-hide="true" fullscreen>
            <!-- <div class="giftTx clearfix" v-if="giftTx">
                <img :src="$imgPath(specialEfficiency)" alt="">
                <audio v-show="bfbTrue == false" class="giftTx-audio" :src="$imgPath(giftObj.music)" controls="controls" autoplay="autoplay"></audio>
            </div> -->
            <div class="giftTx clearfix" v-if="giftTx">
                <span v-show="bfbTrue">{{bfb}}</span>
                <canvas v-show="bfbTrue == false" id="animation_canvas"></canvas>
                <audio v-show="bfbTrue == false" class="giftTx-audio" :src="$imgPath(giftMusic)" controls="controls" autoplay="autoplay"></audio>
            </div>
        </Modal>
    </div>
</template>
<script>
import apiHttp from '../api/index'
import header from './common/header'
import footer from './common/footer'
import serviceTab from './detailChild/detailService'
import QRCode from 'qrcode'
export default {
    data(){
        return{
            giftTx:false,               // 礼物特效
            userId:this.$route.params.userId,      // 用户id
            serviceId:this.$route.query.serviceId,        // 服务id
            userObj:{},                 // 服务人员属性
            value1:0,            
            value2:0,   
            value3:0,    
            detailObj:{},               // 他人资料
            bigPic:'',                  // 轮播大图
            userPhotoIndex:0,           // 图片选择index
            giftList:[],                // 礼物列表
            giftNumVaule:1,             // 礼物数量
            giftIndex:-1,               // 礼物选择
            isGiving:false,             // 礼物打赏弹框
            zhifuType:0,                // 理我打赏支付
            myDetailObj:{},             // 获取自己的详细信息
            moneyObj:{},                // 钱包信息
            isLog:false,                // 判断是否登陆
            giftObj:{},                 // 单个礼物信息
            giftZfObj:{},               // 礼物支付返回钻石信息
            userPhoto:[],               // 相册
            myLabel:[],                 // 个性标签
            videoPlayButton:true,       // 视频播放按钮
            isAtten:false,              //是否关注过
            isShare:false,                 //是否显示分享模块         
            giftNumList:[],             // 收到礼物的统计
            formZFB:'',                 // 支付宝返回的表单
            ewmBox:false,               // 微信支付二维码弹框
            fxLink:window.location.href,    // 页面链接
            shzList:[],                     // 守护者
            ewmBox:false,                   // 礼物微信支付二维码
            wxZfSuccess:'',                             // 微信支付循环
            specialEfficiency:'',               // 特效图片地址
            giftNumArr:[],
            meDetail:true,     // 判断是否自己进入自己的主页

            canvas:'',
            ctx:'',
            bfb:'0%',
            bfbTrue:true,
            giftMusic:'',
            specialEfficiency:''
        }
    },
    components:{
        'yw-header':header,
        'yw-footer':footer,
        serviceTab
    },
    watch:{
        giftNumVaule(newVal,oldVal){
            if(newVal>999){
                this.giftNumVaule = 999
            }else if(newVal<=0){
                this.giftNumVaule = 1
            }
        },
        bfb(newVal,oldVal){
            let self = this
            if(newVal == '100.00%'){
                this.bfbTrue = false
                this.giftMusic = this.giftObj.music
                setTimeout(()=>{
                    this.bfbTrue = true
                    this.giftMusic = ''
                    self.giftTx = !self.giftTx
                    self.bfb = '0%'
                },(self.giftObj.musicTime) * 1000)
            }
        }
    },
    computed:{
        diamond(){
            if(this.giftObj.price * this.giftNumVaule < this.moneyObj.credits){
                return this.giftObj.price * this.giftNumVaule
            }else{
                return this.moneyObj.credits
            }
        }
    },
    mounted(){
        this.personalMessage()
        this.screeningTa()
        this.getAllGiftList()
        this.getGiftMessage()
        this.getGiftCount()
        this.myTags()
        this.verify()
        this.shouhuzhe()
        if(this.userId==''||this.userId==null||this.userId==undefined){
             this.userId = ''
        }else{
            this.getIsAtten()
        }
        if(this.ewmBox == false){
            clearInterval(this.wxZfSuccess)
        }
    },
    methods:{
        // 图片序列
        picXl(level){
            let sources = [],self = this,pngs = ''
            pngs = self.specialEfficiency.substring(0,self.specialEfficiency.length-4)
            for(let i = 1; i < (Number(level) + 1); i++){
                // console.log(self.$imgPath(self.specialEfficiency.substring(0,self.specialEfficiency-4)))
                sources.push(`${self.$imgPath(pngs)}(`+i+`).png?${Math.floor(Math.random()*99999+1)}`)
            }
            setTimeout(()=>{
                self.canvas = document.getElementById("animation_canvas")
                self.canvas.width = 420
                self.canvas.height = 700
                self.ctx = self.canvas.getContext("2d")
                self.loadImages(sources,function(images){
                    self.playImages(images)
                })
            },500)
        },
        loadImages(sources,callback){
            let self = this
            var loadedImages = 0
            var numImages = 0
            var images=[]
            let arr = []
            numImages=sources.length
            for (var i=0;i<sources.length;i++) {
                images[i] = new Image()
                //当一张图片加载完成时执行
                images[i].onload = function(){
                    arr.push('img')
                    self.bfb = (arr.length / numImages * 100).toFixed(2) + '%'
                    //当所有图片加载完成时，执行回调函数callback
                    if (++loadedImages >= numImages) {
                        callback(images)
                    }
                };
                //把sources中的图片信息导入images数组
                images[i].src = sources[i]
            }
        },
        playImages(images){
            let self = this
            var imageNum=images.length
            var imageNow=0
            let txTime = setInterval(function(){
                self.ctx.clearRect(0,0,420,700)
                self.ctx.fillStyle="transparent"
                self.ctx.fillRect(0, 0, 420, 700)
                self.ctx.drawImage(images[imageNow], 0, 0, 420, 700)
                imageNow++
                if(imageNow>=imageNum){
                    clearInterval(txTime)
                }
            },50)
        },
        // 判断token是否有效
        verify(){
            let self = this
            apiHttp.apiLogin.verify('',resp=>{
                if(resp.code == 200){
                    if(resp.data == 1){
                        self.meTo()
                        self.getUserWalletDetail()
                        self.isLog = true
                    }else{
                        localStorage.removeItem('token')
                    }
                }
            })
        },
        meTo(){
            apiHttp.apiCenter.detail('',resp => {
                if(this.userId == resp.id){
                    this.meDetail = false
                }
            })
        },
        //个人信息
        personalMessage(serviceId){        
            let params = {}
            if(serviceId){
                params = {
                    userId:this.userId,
                    serviceId:serviceId,
                }
            }else{
                params = {
                    userId:this.userId,
                    serviceId:this.serviceId,
                }
            }
            apiHttp.apiDetail.personalMessage(params,resp=>{            
                if(resp.code == 200) {                   
                    this.userObj = resp.data
                    let length = resp.data.userPhoto.length;
                    if(length>0){
                        let end = 0;
                        let start = 4;
                        do {
                            let arr = resp.data.userPhoto.slice(end, start)
                            this.userPhoto.push(arr)
                            end = start
                            start += start
                        } while (length > end)
                        this.bigPic = this.userObj.userPhoto[0]
                    }                                     
                }
            })
        },
        // 获取他人资料
        screeningTa(){
            apiHttp.apiCenter.taDetail(this.userId,'',resp => {                      
                this.detailObj = resp
            })
        },
        // 个性标签
        myTags(){
            apiHttp.apiDetail.myTags(this.userId,'',resp =>{
                this.myLabel = resp.content
            })
        },
        // 礼物滚动
        getGiftMessage(){
            let giftArr = []
            let parmes = {
                userId:this.userId
            }
            apiHttp.apiDetail.getGiftMessage(172,parmes,resp=>{
                if(resp.code == 200){
                    for(let i = 0; i < resp.data.length; i++){
                        resp.data[i].shu = resp.data[i].descript.split('&')
                    }
                    for(var i=0;i<resp.data.length;i=i+2){
                        giftArr.push(resp.data.slice(i,i+2))
                    }
                    this.giftNumArr = giftArr
                }
            })
        },
        // 守护者
        shouhuzhe(){
            apiHttp.apiDetail.shouhuzhe(this.userId,'',resp=>{
                if(resp.code == 200){
                    this.shzList = resp.data
                }
            })
        },
        //礼物展示列表
        getAllGiftList() {
            apiHttp.apiCenter.getAllGiftList('', resp => {
                if (resp.code == 200) {
                    this.giftList = resp.data
                }
            })
        },
        //获得的礼物列表
        getGiftCount() {
            let arr = []
            let params = {
                userId: this.userId
            }
            apiHttp.apiDetail.getGiftCount(params,resp => {
                if(resp.code == 200) {
                    if(resp.data.length>0){
                        for(var i=0;i<resp.data.length;i=i+6){
                            arr.push(resp.data.slice(i,i+6))
                        }
                    }
                    this.giftNumList = arr
                }
            })
        },
        // 接收子组件的传值
        detailService(serviceId){
            this.personalMessage(serviceId)
        },
        // 礼物减
        giftJian(){
            if(JSON.stringify(this.giftObj) == "{}"){
                this.$Message.warning('请先选择礼物！')
                return
            }
            if(this.giftNumVaule > 1){
                this.giftNumVaule--
            }else{
                this.giftNumVaule = 1
            }
        },
        // 礼物加
        giftAdd(){
            if(JSON.stringify(this.giftObj) == "{}"){
                this.$Message.warning('请先选择礼物！')
                return
            }
            this.giftNumVaule++
        },
        // 赠送弹框
        giving(){
            if(!this.isLog){
                this.$Message.warning('请您先登陆！')
            }else{
                if(this.giftIndex != -1){
                    this.isGiving = true
                }else{
                    this.$Message.warning('请先选择礼物！')
                }
            }
        },
        // 获取个人资料
        screening(){
            apiHttp.apiCenter.detail('',resp => {
                this.myDetailObj = resp
            })
        },
        // 钱包详情
        getUserWalletDetail(){
            apiHttp.apiCenter.getUserWalletDetail('',resp=>{
                if(resp.code == 200){
                    this.moneyObj = resp.data
                }
            })
        },
        // 抵扣计算
        credits2rmb(){
            let params = {
                money:this.giftObj.price * this.giftNumVaule,
                platform:1      // 1 APP(非IOS）  2IOS   3WEB
            }
            apiHttp.apiCenter.credits2rmb(params,resp=>{
                if(resp.code == 200){
                    this.giftZfObj = resp.data
                }
            })
        },
        // 礼物支付
        giftPay(){
            let payType = '',returnUrl = '',self = this
            if(this.moneyObj.credits < this.giftObj.price * this.giftNumVaule){
                if(this.zhifuType == 0){
                    payType = 11
                    returnUrl = this.fxLink
                }else{
                    payType = 4
                }
            }else{
                payType = ''
            }
            let params = {
                count:this.giftNumVaule,
                giftId:this.giftObj.id,
                payType:payType,    // 支付类型: 1微信公众号 2微信H5 3微信APP；10支付宝; 11支付宝H5 12支付宝app 100余额支付 101代币（钻石）支付
                receiveUserId:this.userId,
                source:3,     // 订单来源 1APP 2IOS 3WEB
                autoCost:true,
                returnUrl:returnUrl
            }
            apiHttp.apiCenter.giftPay(params,resp=>{
                if(resp.code == 200){
                    if(payType == ''){
                        this.$Message.success('打赏成功')
                        this.giftNumVaule = 1
                        this.isGiving = false
                        this.getUserWalletDetail()
                        this.giftTx = !this.giftTx
                        // this.specialEfficiency = `${this.giftObj.specialEfficiency}?${Math.floor(Math.random()*9999+1)}`
                        let level = this.giftObj.level
                        console.log(level)
                        this.picXl(level)
                        setTimeout(()=>{
                            self.getGiftCount()
                            self.getGiftMessage()
                            self.giftTx = true
                        },(self.giftObj.musicTime) * 1000)
                    }else if(payType == 11){
                        if(resp.data != null){
                            this.formZFB = resp.data
                            const div = document.createElement('div')
                            div.innerHTML = this.formZFB
                            document.body.appendChild(div)
                            document.forms[0].submit()
                        }else{
                            this.$Message.success('打赏成功')
                            this.giftNumVaule = 1
                            this.isGiving = false
                            this.giftTx = !this.giftTx
                            this.specialEfficiency = `${this.giftObj.specialEfficiency}?${Math.floor(Math.random()*9999+1)}`
                            let level = this.giftObj.level
                            // this.picXl(level)
                            setTimeout(()=>{
                                self.getGiftCount()
                            self.getGiftMessage()
                                self.giftTx = !self.giftTx
                            },(self.giftObj.musicTime) * 1000)
                        }
                    }else if(payType == 4){
                        if(resp.data != null){
                            this.qrcode1(resp.data)
                        }else{
                            this.$Message.success('打赏成功')
                            this.giftNumVaule = 1
                            this.isGiving = false
                            this.giftTx = !this.giftTx
                            this.specialEfficiency = `${this.giftObj.specialEfficiency}?${Math.floor(Math.random()*9999+1)}`
                            let level = this.giftObj.level
                            // this.picXl(level)
                            setTimeout(()=>{
                                self.getGiftCount()
                                self.getGiftMessage()
                                self.giftTx = !self.giftTx
                            },(self.giftObj.musicTime) * 1000)
                        }
                    }
                }
            })
        },
        // 礼物微信支付生成二维码
        qrcode1(data) {
            let self = this
            let opts = {
                errorCorrectionLevel: 'H',
                type: 'image/jpeg',
                rendererOpts: {
                    quality: 0.3
                }
            }
            QRCode.toCanvas(this.$refs.canvas1,data.url, opts,(err, url)=> {
                if (err){
                    console.log(err)
                }
            })
            this.wxZfSuccess = setInterval(()=>{
                self.orderVerify(data.orderId)
            },3000)
            this.isGiving = !this.isGiving
            this.ewmBox = true
        },
        // 判断微信支付是否成功
        orderVerify(id){
            apiHttp.apiCenter.orderVerify(id,'',resp=>{
                if(resp.data == true){
                    clearInterval(this.wxZfSuccess)
                    this.ewmBox = false
                    this.$Message.success('微信支付成功')
                    this.getGiftCount()
                    this.getGiftMessage()
                }
            })
        },
        // 视频播放
        videoPlay(){
            let self = this
            let myVideo = document.getElementById("myVideo")
            if(myVideo.paused){
                myVideo.play()
                this.videoPlayButton = !this.videoPlayButton
            }else{
                myVideo.pause()
                this.videoPlayButton = !this.videoPlayButton
            }
            let videoTime = Math.floor(myVideo.duration)
            setTimeout(()=>{
                self.videoPlayButton = true
            },videoTime*1000)
        },
        //是否关注过接口
        getIsAtten(){
            let params = {
                objectId:this.userId
            }
            apiHttp.apiCenter.isAttention(this.userId,params,resp=>{                   
                if(resp.code==200){
                        this.isAtten = resp.data
                }else{
                    this.$Message.warning(message)
                }
            })
        },
        //用户添加关注
        addAtt(){
            let params = {
                objectId:this.userId
            }
            apiHttp.apiCenter.addAttention(params,resp=>{               
               if(resp.code==200){
                   this.isAtten = true;                 
                    this.$Message.info("已关注")
                    this.screeningTa()
                }else{
                   this.$Message.warning(message)
                }
            })
        },
        //用户取消关注
        dropAtt(userId){
            let params = {
                objectId:userId
            }
            apiHttp.apiCenter.dropAttention(userId,params,resp=>{
                if(resp.code==200){
                    this.isAtten = false;                                      
                    this.$Message.info("已取消关注")
                    this.screeningTa()
                }else{
                   this.$Message.warning(message)
                }
            })
        },
        // 生成分享二维码
        qrcode() {
            let self = this
            let opts = {
                errorCorrectionLevel: 'H',
                type: 'image/jpeg',
                rendererOpts: {
                    quality: 0.3
                }
            }
            QRCode.toCanvas(self.$refs.canvas,self.fxLink, opts,(err, url)=> {
                if (err){
                    console.log(err)
                }
            })
        },
        // 复制
        copy(){
            var Url2 = this.fxLink
            var oInput = document.createElement("input")
            oInput.value = Url2
            document.body.appendChild(oInput)
            oInput.select() // 选择对象
            document.execCommand("Copy") // 执行浏览器复制命令
            oInput.className = "oInput"
            oInput.style.display = "none"
            this.$Message.success("复制成功")
        },

        noneShare(){
            this.$Message.success("功能暂未开放，敬请期待...")
        }
    }
}
</script>
<style scoped>

.Payment{
    margin-top: 0;
}
.dzh{
    position: relative;
}
.gz-fx .gz-drop{
    border-radius: 20px;
    height: 26px;
    width: 110px;
    background-color: #C8C8C8;
    color: #fff;
    font-size: 14px;
    text-align: center;
    display: block;
    line-height: 26px;
}
/* 分享 */
.dzh .share{
    box-sizing: border-box;
    width: 360px;
    height: 230px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    right: -30%;
    top: 70%;
    z-index: 99;
}
.dzh .share>p{
    margin: 0;
    font-size: 14px;
    color: #666666;
    height: 40px;
    background-color: #F3F3F3;
    padding-left: 30px;
    line-height: 40px;
}
.dzh .share .share-img{
    padding-left: 30px;
    padding-top: 30px;
}
.dzh .share .share-img img{
    margin-right: 20px;   
}
.dzh .share .share-img img:nth-child(1){
    width: 100px;
    height: 100px;
}
.dzh .share .share-img .share-small{
    padding-bottom: 20px;
}
.dzh .share .share-bot{
    box-sizing: border-box;
    height: 40px; 
    margin-top: 10px;
}
.dzh .share .share-bot>input{
    float: left;
    font-size: 14px;
    color: #333333; 
    margin-left: 30px;
    height: 40px;
    border-radius: 10px 0 0 10px;
    border:#eee solid 1px;
    border-right: none;
    width: 230px;
    padding-left: 10px;

}
.dzh .share .share-bot>div{
    float: left; 
    margin-right: 10px;
    width: 80px;
    background-color: #CD4D4B;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 16px; 
}
.myClear{
    clear: both;
}
.canvasShare{
    height: 100px !important;
    width: 100px !important;
}

.giftTx{
    /* position: relative; */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    text-align: center;
    vertical-align: middle;
}
.giftTx span{
    padding-top: 200px;
    color: #fff;
    font-size: 50px;
    display: block;
    height: 30px;
    height: 50px;
    line-height: 50px;
}
.giftTx img{
    margin:0 auto;
    width: 500px;
    display: inline-block;
}
.giftTx-audio{
    opacity: 0;
}
.imgLunboSpan{
    width: 50px;
}
</style>

